<template>
	<div>
		<top-bar title="我的草稿" open = "4">
			<div slot="rightItem"></div>
		</top-bar>
		<div class="approvalView" v-if="shows">
			<van-pull-refresh v-model="isLoading" :style="{height:refreshHeight}" @refresh="onRefresh">
				<van-list v-model="loading" ref="list5" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check='false'>
					<ul class="list">
						<van-swipe-cell v-for="item in fromDataList" :before-close="beforeClose">			
							  <li @click="goPush(item.form_big_id,item.num)">
								<div class="list-box1">
									<div class="list_title">{{item.workflow_name}}{{item.num}}</div>
									<div :style="{'color':allColor.draft_list_icon_color}" class="colors">
									<van-icon name="comment-circle"/>
									草稿</div>
								</div>
								<div class="list-box2">
									<!-- <div class="list-title-min work-flow">编号:{{item.num}}</div> -->
									<div class="list-title-min time">{{item.modify_datetime}}</div>
								</div>
							  </li>
							  <template #right>
								<van-button @click="edit(item.form_big_id,item.num,item.workflow_name)" square type="primary" text="修改"/>
								<van-button @click="delet(item.form_big_id,item.num)" square type="danger" text="删除"/>			
							  </template>
						</van-swipe-cell>
					</ul>
				</van-list>
			</van-pull-refresh>
		</div>		
		
	</div>
</template>

<script>
	import topBar from '@components/topBar.vue'
	import { approvalList } from '@assets/js/mixins/approvalList.js'
	import { swipeCell } from '@assets/js/mixins/swipeCell.js'
	import {getForm2} from '@request/api.js'
	import { pHeight } from '@assets/js/height.js'
	export default{
		mixins: [approvalList,swipeCell],
		data(){
			return{
				fromDataList:[],
				downLoad:true,
				loading:false,
				finished:false,
				isLoading:false,
				refreshHeight:'auto',
				shows:true,
				stop:true,
				instance:null,
				obj:{
					'_page':1,
					'_pagesize':20,
					'_url': 'apply3',
					'party':this.$store.state.third_name
				}
			}
		},
		components:{
			topBar
		},
		created() {

		},
		methods: {
			onLoad(){
				setTimeout(()=>{
					if(this.stop && this.downLoad){
						this.upList()
						this.stop = false
					}			
				},500)
			},
			upList(){
				  this.obj._page++
				　getForm2(this.obj).then(res=>{
						if(res.code === 0){
							this.$store.commit('changTotal2', res.total)
							res.data.forEach(item =>{
							  this.fromDataList.push(item)
							})
							// 加载状态结束
							this.loading = false;
							this.stop = true					
							if (this.fromDataList.length >= res.total) {
							    this.finished = true;	
								return false
							}
						}				
					})　				
			},
			onRefresh(){
				this.downLoad = false
				this.obj._page = 1
				this.finished = false
				setTimeout(()=>{
					this.getList()
				},500)
			},
			getList(){
				getForm2(this.obj).then(res=>{
					if(res.code === 0){
						this.fromDataList = res.data																	// list高度
							if(this.$refs.list5){
								this.$nextTick(()=>{
									let refresh = this.$refs.list5.$el.offsetHeight					
									const val = pHeight(refresh)
									if(val !== 'kong'){
										this.refreshHeight = val+'px'
									}else{
										this.shows =false
										this.refreshHeight = 'atuo'
										setTimeout(()=>{
											this.shows =true
										},0)
										this.shows =true
									}
								})	
							}
						// 加载状态结束
						this.isLoading = false;
						this.downLoad = true
						if (this.fromDataList.length >= res.total) {
						  this.finished = true;		
						  return false
						}
					}				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-flow p {
		display: inline-block;
	}
	.van-button{
		height: 100%;
	}
	.approvalView{
		height: calc(100% - 98px) !important;
		top: 80px !important;
	}
	.list-box2 {
		display: flex;
		flex-direction: row-reverse;
	}
	@import '@assets/css/commont.scss'
</style>
